<template>
	<view class="issue" :style="{'bottom': windowBottom+'px'}">
		<up-checkbox-group v-model="checkboxValue" placement="column">
			<up-checkbox :name="true" shape="circle" activeColor="#f1692b" label="我已知晓并同意《平台服务协议》" labelSize="12"
				labelColor="#A6A1A1">
			</up-checkbox>
		</up-checkbox-group>
		<view class="issue-bottom">
			<view class="price">
				￥{{ price }}
				<image v-if="type" @click="handlePrice" mode="widthFix" src="@/static/image/matter.png"></image>
			</view>
			<view class="button">
				<up-button @click="handleSumbit" :type="type?'primary':'info'" text="发布订单"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import ExpenseBreakdown from '@/components/ExpenseBreakdown.vue'
	import Popup from './popup.vue'
	import {
		ref,
	} from 'vue'
	import util from '../../../utils/util';
	const props = defineProps({
		price: {
			type: [Number, String],
			default: 0
		},
		type: {
			type: Boolean,
			default: false
		}
	})
	const checkboxValue = ref([])
	const windowBottom = util.windowBottom()
	const emits = defineEmits(['priceClick', 'sumbit'])
	const handlePrice = () => {
		emits('priceClick')
	}
	const handleSumbit = () => {
		if(props.type && checkboxValue.value[0]) {
			emits('sumbit')
		}
	}
</script>

<style lang="scss" scoped>
	.issue {
		box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(128, 128, 128, 0.06);
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 180rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #fff;

		.issue-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #2C1F21;
				line-height: 42rpx;
				display: flex;
				align-items: center;

				image {
					margin-left: 18rpx;
					width: 24rpx;
				}
			}
			.button {
				width: 192rpx;
			}
		}
	}
</style>